 <template>
 	<view class="system-page">
 		<common-list :isDataEmpty="tableData.length === 0" :status="status">
 			<template #list>
 				<view>
 					<view class="list">
 						<view class="card" v-for="(item, index) in tableData" :key="index">
 							<view class="date">{{ item.createTime }}</view>
 							<view class="card-info" @click="handDetail(item)">
 								<view style="flex: 1; width: 0;">
 									<view class="title u-line-1">
 										{{ item.title }}
 									</view>
 									<view class="desc u-line-1">
 										{{ item.content }}
 									</view>
 								</view>
 								<view class="more">
 									<uv-icon name="arrow-right"></uv-icon>
 								</view>
 							</view>
 						</view>
 					</view>
 				</view>
 			</template>
 			<template #empty>
 				<view>
 					<view class="empty">
 						<image src="/static/commentEmpty.png" mode=""></image>
 						<text>暂无消息</text>
 					</view>
 				</view>
 			</template>
 		</common-list>
 	</view>
 </template>

 <script setup>
 	import {
 		ref
 	} from 'vue'
 	import {
 		onLoad,
 		onReachBottom,
 		onPullDownRefresh
 	} from "@dcloudio/uni-app";
 	import {
 		userList
 	} from '@/hooks/userList.js'
 	import CommonList from '@/components/commonList/list.vue'
 	import CarCard from '@/components/card/CarCard.vue'
 	import {
 		doNoticeList
 	} from '@/apis/user.js'

 	const handDetail = (e) => {
 		let url = `/pagesA/order/detail?id=${e.orderId}`
 		if (e.type !== 'USER') {
 			url += `&type=shop`
 		}
 		uni.navigateTo({
 			url
 		})
 	}
 	/**
 	 * 
 	 * 列表数据
 	 * */
 	const getApi = async (params) => {
 		const res = await doNoticeList(params)
 		return res
 	}
 	const {
 		tableData,
 		status,
 		fetchData,
 		onBottom,
 		onRefresh,
 		queryForm
 	} = userList({
 		apis: {
 			getApi
 		},
 		initForm: {

 		}
 	})

 	onPullDownRefresh(() => {
 		onRefresh()
 	})
 	onReachBottom(() => {
 		onBottom()
 	})

 	onLoad(() => {
 		onRefresh()
 	})
 </script>

 <style lang="scss" scoped>
 	.system-page {
 		min-height: 100vh;
 		background: #F5F5F5;

 		.list {
 			padding: 24rpx;

 			.card {
 				&:not(:first-child) {
 					margin-top: 32rpx;
 				}

 				.date {
 					font-size: 28rpx;
 					font-family: PingFang SC-Regular, PingFang SC;
 					font-weight: 400;
 					color: #999999;
 					text-align: center;
 				}

 				&-info {
 					width: 702rpx;
 					margin: 24rpx auto 0 auto;
 					background: #FFFFFF;
 					border-radius: 16rpx;
 					display: flex;
 					align-items: center;
 					background-color: #fff;
 					box-sizing: border-box;
 					padding: 24rpx;

 					.title {
 						font-size: 32rpx;
 						font-family: PingFang SC-Bold, PingFang SC;
 						font-weight: bold;
 						color: #333333;
 					}

 					.desc {
 						margin-top: 16rpx;
 						font-size: 26rpx;
 						font-family: PingFang SC-Regular, PingFang SC;
 						font-weight: 400;
 						color: #999999;
 					}

 					.more {
 						color: #999999;
 					}
 				}
 			}
 		}

 		.empty {
 			padding-top: 140rpx;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;

 			image {
 				width: 371.8rpx;
 				height: 220.92rpx;
 			}

 			text {
 				margin-top: 36rpx;
 				font-size: 28rpx;
 				font-family: PingFang SC-Regular, PingFang SC;
 				font-weight: 400;
 				color: #999999;
 			}
 		}

 	}
 </style>